<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <!-- 3 收取 输入框的信息 绑定给变量 在data声明变量 -->
      <input type="text" v-model="name" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="age" />
    </div>
    <div>
      <span>性别:</span>
      <!-- 同3步 -->
      <select v-model="sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <!--2 绑定事件给标签 -->
      <button @click="btn">添加/修改</button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <!--1 铺页面 -->
        <tr v-for="(obj,index) in arr" :key="index">
          <td>{{index+1}}</td>
          <td>{{obj.name}}</td>
          <td>{{obj.age}}</td>
          <td>{{obj.sex}}</td>
          <td>
            <!-- 6 绑定事件 -->
            <button type="button" @click.prevent="sc(index)">删除</button>
            <button type="button" @click.prevent="bj(obj,index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    data() {
      return {
        arr: [{

            name: "tom",
            age: "19",
            sex: "男"
          },
          {

            name: "dom",
            age: "29",
            sex: "男"
          },
          {

            name: "tt",
            age: "18",
            sex: "女"
          },
          {

            name: "tim",
            age: "1999",
            sex: "女"
          }


        ],
        name: '',
        age: 0,
        sex: '',
        nindex: -1 //10.声明一下这个变量  给-1 就是没点过编辑 给别的索引就变成了默认编辑了
      }
    },

    methods: {
      // 4 在methods里声明这个方法.
      btn() {
        let obj = {
          name: this.name,
          age: this.age,
          sex: this.sex
        }
        // 11 用nindex判断是点了 添加  还是 编辑
        if (this.nindex == -1) {
          // 4.1 添加到数组里
          this.arr.push(obj);
        } else {
          Vue.set(this.arr, this.nindex, obj);
          this.nindex = -1;
        }
        // 5 优化残留
        this.name = "";
        this.age = 0;
        this.sex = "";
      },
      // 7 删除根据索引获取的内容
      sc(index) {
        this.arr.splice(index, 1)
      },
      // 8 当你点击编辑时 数据绑定给输入框的变量,然后显示到输入框 ,原理:  双向绑定 数据驱动视图
      bj(obj, index) {
        this.age = obj.age
        this.sex = obj.sex
        this.name = obj.name
        // 9保存点击编辑的索引.一会用于判断是点击的那个按钮
        this.nindex = index

      }
    }
  }
</script>